<template>
  <div class="patient" v-loading="loading">
    <el-card class="card">
      <template #header>
        <div class="card-header">
          <span>就诊人管理</span>
          <el-button
            v-show="scene == 0"
            type="primary"
            size="default"
            @click="addPatient"
          >
            <template #default>
              <SvgIcon name="add" width="16px" height="16px" />
              <span style="margin-left: 5px">添加就诊人</span>
            </template>
          </el-button>
        </div>
      </template>
      <!-- 就诊人卡片 -->
      <div v-if="scene == 0" class="content">
        <PatientCard
          v-for="item in allPatient"
          :patient="item"
          :key="item.id"
          style="margin-right: 8px"
        />
        <div class="right"></div>
      </div>
      <!-- 添加/修改就诊人的表单 -->
      <div v-else class="form">
        <!-- 分割线 -->
        <el-form label-width="auto" :inline="true">
          <!-- 分割线 -->
          <el-divider content-position="left">就诊人信息</el-divider>
          <div class="part_one">
            <el-form-item label="用户姓名">
              <el-input
                v-model="patientData.name"
                placeholder="请输入用户姓名"
              />
            </el-form-item>
            <el-form-item label="用户性别">
              <el-radio-group v-model="patientData.sex" style="width: 100%">
                <el-radio :value="1">男</el-radio>
                <el-radio :value="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="patientData.phone"
                placeholder="请输入手机号码"
              />
            </el-form-item>
            <el-form-item label="证件类型">
              <el-select
                v-model="patientData.certificatesType"
                style="width: 200px"
                placeholder="请选择证件类型"
              >
                <el-option
                  v-for="item in certificatesType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="patientData.certificatesNo"
                placeholder="请输入证件号码"
              />
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="patientData.birthdate"
                style="width: 200px"
                type="date"
                placeholder="请选择出生日期"
              />
            </el-form-item>
          </div>
          <!-- 分割线 -->
          <el-divider content-position="left">
            建档信息（完善后部分医院首次就诊无需再次排队建档）
          </el-divider>
          <div class="part_two">
            <el-form-item label="婚姻状况">
              <el-radio-group v-model="patientData.isMarry">
                <el-radio :value="0">未婚</el-radio>
                <el-radio :value="1">已婚</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="付款方式">
              <el-radio-group v-model="patientData.isInsure">
                <el-radio :value="0">自费</el-radio>
                <el-radio :value="1">医保</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="当前住址">
              <!-- 动态加载的级联选择器 -->
              <el-cascader
                v-model="patientData.addressSelected"
                :props="props"
                placeholder="请选择当前住址"
              />
            </el-form-item>
            <el-form-item label="详细地址">
              <el-input
                v-model="patientData.address"
                placeholder="请输入详细地址"
              />
            </el-form-item>
          </div>
          <!-- 分割线 -->
          <el-divider content-position="left">
            紧急联系人信息（选填）
          </el-divider>
          <div class="part_three">
            <el-form-item label="联系人姓名">
              <el-input
                v-model="patientData.contactsName"
                placeholder="请输入紧急联系人姓名"
              />
            </el-form-item>
            <el-form-item label="证件类型">
              <el-select
                v-model="patientData.contactsCertificatesType"
                placeholder="请选择证件类型"
              >
                <el-option
                  v-for="item in certificatesType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="patientData.contactsCertificatesNo"
                placeholder="请输入紧急联系人证件号码"
              />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="patientData.contactsPhone"
                placeholder="请输入紧急联系人手机号码"
              />
            </el-form-item>
          </div>
          <!-- 底部按钮 -->
          <div class="part_four">
            <el-form-item>
              <el-button type="primary" @click="submit">提交</el-button>
              <el-button style="margin-left: 80px" @click="cancel">
                取消
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Patient">
import { reqCity } from '@/api/patient'
import { reqCertificatesType } from '@/api/user'
import type { CertificatesType } from '@/api/user/type'
import usePatientStore from '@/store/modules/patient'
import { type CascaderProps } from 'element-plus'
import { storeToRefs } from 'pinia'
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 加载效果
let loading = ref(false)
// 获取路由对象
let route = useRoute()
// 获取路由器对象
let router = useRouter()
// 存储证件类型
let certificatesType = ref<CertificatesType[]>([])
// 获取就诊人仓库
const patientStore = usePatientStore()
// 获取仓库中全部的就诊人信息、控制场景切换的值、表单要收集的数据
const { allPatient, scene, patientData } = storeToRefs(patientStore)
// 获取仓库中的获取全部就诊人的方法和更新/新增就诊人的方法
const { getAllPatient, updateOrAddPatient } = patientStore

// 级联选择器数据
const props: CascaderProps = {
  // 开启懒加载
  lazy: true,
  /* lazyLoad加载级联选择器数据的函数
      两个参数:node当前点击的节点,resolve数据加载完成的回调
      函数在初始时执行一次,选择当前一级的选项时执行,加载下一级选项 */
  async lazyLoad(node: any, resolve: any) {
    // 初始获取一级城市的id为86,以后根据上一级城市的id获取下一级城市
    let id = node.data.value || '86' // node.data.value为空时86,否则取当前节点的id
    // 获取当前级城市数据
    let result = await reqCity(id)
    /* 整理数据:
      nodes(节点)的数据类型必须为{label:标签的值,leaf:是否为叶子节点,value:v-model收集的值} */
    const nodes = result.data.map((item) => {
      return {
        label: item.name,
        leaf: !item.hasChildren,
        value: item.value,
      }
    })
    // 数据加载完成的回调,将数据注入到选择器中
    resolve(nodes)
  },
}
// 添加就诊人按钮的回调
const addPatient = () => {
  // 切换场景
  scene.value = 1
}
// 点击取消按钮的回调
const cancel = () => {
  // 切换场景
  scene.value = 0
  // 重新获取数据
  getAllPatient()
  // 返回到来时路由
  router.push(route.query.redirect as string)
  router.back()
}
// 点击提交按钮的回调
const submit = async () => {
  // 通知仓库更新/添加就诊人和切换场景,重新获取全部就诊人信息
  updateOrAddPatient()
  // 返回到来时路由
  router.push(route.query.redirect as string)
  // router.back()
}
// 当前场景值发生变化时清空表单收集的数据
watch(
  () => {
    return scene.value
  },
  (val: number) => {
    // 当切换到就诊人卡片时清除上次残留的数据
    if (val == 0) {
      patientData.value = {
        id: null,
        address: '',
        birthdate: '',
        certificatesNo: '',
        certificatesType: '',
        contactsCertificatesNo: '',
        contactsCertificatesType: '',
        contactsName: '',
        contactsPhone: '',
        isInsure: 0,
        isMarry: 0,
        name: '',
        phone: '',
        sex: 1,
        addressSelected: [],
        userId: 1,
      }
    }
  },
)
// 组件挂获取全部就诊人的信息
onMounted(async () => {
  // 显示加载效果
  loading.value = true
  // 通知仓库获取全部就诊人的信息
  await getAllPatient()
  // 获取全部证件类型
  let result = await reqCertificatesType('CertificatesType')
  certificatesType.value = result.data
  // 关闭加载效果
  loading.value = false
})
</script>

<style scoped lang="scss">
.patient {
  .card {
    color: $base-color;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
    }
    .content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
    }
    .form {
      .part_one,
      .part_two,
      .part_three {
        margin: 0 20px;
        :deep(.el-form-item) {
          width: 45%;
        }
      }
      .part_four {
        margin: 10px 50px -10px 360px;
      }
    }
    :deep(.el-divider__text) {
      color: $base-color;
    }
  }
}
</style>
